<!--
 * @description  :移送外单位案件代管入库
 * @descriptionDetail:移送外单位案件代管入库
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-12-22 16:31:05
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="content">
      <view>
        <view class="It-title">
          <view class="CT-title">
            {{ detailInfo.custodyNo }}
          </view>
          <u-tag style="flex-shrink: 0;" :spStyle="getSpStyle(detailInfo)" mode="dark" shape="circle" :text="detailInfo.custodyStatusName"></u-tag>
        </view>
        <u-row class="pd-tp">
          <u-col span="6" class="pd-lf">
            <view class="CT-label">
              创建日期：
            </view>
            <view class="CT-value">
              {{ detailInfo.createTime || '/' }}
            </view>
          </u-col>
          <u-col span="6" class="pd-lf">
            <view class="CT-label">
              创建人：
            </view>
            <view class="CT-value">
              {{ detailInfo.creatorName || '/' }}
            </view>
          </u-col>
        </u-row>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style">
        <view class="form-style-title">
          <view class="left-info-tag"></view>
          <view class="fs-title">其他信息</view>
        </view>
        <u-form :model="detailItem" ref="uForm" :error-type="['border-bottom', 'message',]" label-width="140" label-position="top" :border-bottom="false" :label-style="labelStyle">
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="案件编号">
                {{ detailItem.caseCode || '/' }}
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="移送函编码">
                {{ detailItem.docNo || '/' }}
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="仓库名称">
                {{ detailItem.storeName || '/' }}
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="代管编号">
                {{ detailInfo.custodyNo || '/' }}
              </u-form-item>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="12" style="padding: 0px 0px">
              <u-form-item label="备注" :required="true" prop="remake">
                <u-input type="textarea" :disabled="isDisabled" :border="false" placeholder="请填写备注" height="66" v-model="detailItem.remake" />
              </u-form-item>
            </u-col>
          </u-row>
        </u-form>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style" style="line-height: 62rpx;">
        <view class="form-style-title">
          <view class="left-info-tag" style="margin-top:14rpx"></view>
          <view class="fs-title">物品明细</view>
        </view>
        <view v-for="(item,index) in goodsList" :key="index" style="border-bottom:1px solid #DADADD;font-size:26rpx">
          <u-swipe-action
            :show="item.show"
            :index="item.goodsUuid"
            :disabled="item.swiperDisabled"
            @click="swiperClick(item.goodsUuid,index)"
            @open="swiperOpen(item)"
            :options="item.swiperOptions"
          >
            <view style="font-size:30rpx">
              {{ item.goodsName }}
            </view>
            <view>
              <text>
                当事人：
              </text>
              <text>
                {{ item.party }}
              </text>
            </view>
            <view>
              <text>
                录入时间：
              </text>
              <text>
                {{ item.createTime }}
              </text>
            </view>
            <view>
              <text>
                物品大类：
              </text>
              <text>
                {{ item.propTypeName }}
              </text>
            </view>
            <view>
              <text>
                物品小类：
              </text>
              <text>
                {{ item.propSubtypeName }}
              </text>
            </view>
            <u-row gutter="16">
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    入库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.baseQty || 0 }}
                  </view>
                </view>
              </u-col>
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    可出库数量（条）
                  </view>
                  <view class="main-info">
                    {{ item.qty || 0 }}
                  </view>
                </view>
              </u-col>
              <u-col span="4">
                <view class="part-item-info">
                  <view class="sub-title">
                    出库数量（条）
                  </view>
                  <view class="main-info">
                    <!-- {{ item.outQty || 0 }} -->
                    <u-input :disabled="isDisabled" type="number" :border="false" placeholder="" height="66" v-model="item.outQty" @blur="blurChange(item)"/>
                  </view>
                </view>
              </u-col>
            </u-row>
          </u-swipe-action>
        </view>
      </view>
      <view style="border-bottom: 20rpx solid #f2f3f5;margin: 26rpx -56rpx;"></view>
      <view class="form-style">
        <view class="form-style-title">
          <view class="left-info-tag"></view>
          <view class="fs-title">附件列表</view>
        </view>
        <m-upload
          :uploadParam="fileUploadParam"
          upApiUrl="uploadBase64ForApp"
          :fileList="fileList"
          @on-list-change="changeUpload"
          :disabled="isDisabled"
          :deletable="!isDisabled"
        ></m-upload>
      </view>
    </view>
    <view class="submit-btns btn-other-cls" style="margin-left:-30rpx" v-if="!isDisabled">
      <u-button class="u-btn" type="primary" @click="submit">
        代管出库提交
      </u-button>
    </view>
  </view>
</template>

<script>
import MUpload from "@/components/m-upload.vue";
import { uuid, } from '@/common/util.js';
import storeService from '@/service/store/store.service.js';
import { C_CUSTODY_STATUS,C_CUSTODY_TYPE, } from "@/service/store/mapping/enum.js"
const sysCodeColors = {
  "02": {
    color: "#01A79A",
    borderColor: "#01A79A",
    backgroundColor: "#C0ECE2",
  },
  "05": {
    color: "#AC0000",
    borderColor: "#AC0000",
    backgroundColor: "#F2CCCC",
  },
  "04": {
    color: "#0079F2",
    borderColor: "#0079F2",
    backgroundColor: "#E0ECFF",
  },
  "03": {
    color: "#EC7C37",
    borderColor: "#EC7C37",
    backgroundColor: "#FBE2D3",
  },
};
export default {
  components: {
    MUpload,
  },
  data() {
    return {
      customStyle:{
        padding:"20rpx 32rpx",
      },
      labelStyle:{
        'color':"#666666",
        'font-size':'13px',
      },
      fileUploadParam:{
        fiGroupCode:this.$FILE_GROUP_TYPE.c_custody_apply,
        bizId:"",
      },
      detailItem: {},
      goodsList: [],
      baseInfo: {},
      fileList: [],
      isDisabled: true,
      rules: {
        remake: [{
          required: true,
          message: '请输入备注',
          // 可以单个或者同时写两个触发验证方式
          trigger: ['change', 'blur',],
        },],
      },
    }
  },
  onLoad() {
    this.detailInfo = this.getRouteParam();
    this.detailInfo.uuid = uuid();
    this.fileUploadParam.bizId = this.detailInfo.uuid;
    if ((this.detailInfo.custodyType == C_CUSTODY_TYPE.IN_TRANS_CASE  || this.detailInfo.custodyType == C_CUSTODY_TYPE.IN_UNIT_CASE) && Number(this.detailInfo.qty) > 0) {
      this.isDisabled = false;
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  created () {
    this.init();
  },
  methods: {
    getSpStyle(it){
      if(it.custodyStatus == C_CUSTODY_STATUS.C_CUSTODY_STATUS_02){
        return sysCodeColors[it.custodyStatus] || {};
      }else if(it.custodyStatus == C_CUSTODY_STATUS.C_CUSTODY_STATUS_03){
        return sysCodeColors[it.custodyStatus] || {};
      }else if(it.custodyStatus == C_CUSTODY_STATUS.C_CUSTODY_STATUS_04){
        return sysCodeColors[it.custodyStatus] || {};
      }else if(it.custodyStatus == C_CUSTODY_STATUS.C_CUSTODY_STATUS_05){
        return sysCodeColors[it.custodyStatus] || {};
      }
    },
    init () {
      this.$modal.showLoading('加载中...');
      storeService.queryCustodyInfo(this.detailInfo.custodyId).then(res => {
        if (res.success) {
          this.$modal.hideLoading();
          this.detailItem = res.bean
          this.fileList = res.bean.fileList
          this.goodsList = res.bean.custodyDtlList.filter(item => {
            this.getItemCanEdit(item);
            item.show = false;
            item.swiperDisabled = false;
            this.$set(item, 'outQty', item.qty);
            return item;
          })
        } else {
          this.$modal.hideLoading();
          console.log(res)
        }
      }).catch(err => {
        this.$modal.hideLoading();
        console.log(err)
      })
    },
    getItemCanEdit (item) {
      let disabled = true;
      let swiperOptions = [];
      if (!this.isDisabled) {
        disabled = false;
        swiperOptions.push({
          text: '删除',
          action:"delete",
          style: {
            backgroundColor: this.$theme.u_type_error,
          },
        });
      }
      item.swiperOptions = swiperOptions;
      item.swiperDisabled = disabled;
    },
    swiperClick(index1, index) {
      this.goodsList.splice(index, 1);
      this.goodsList.map((val, idx) => {
        this.goodsList[idx].show = false;
      });
      this.$forceUpdate()
    },
    swiperOpen(item) {
      let id = item.goodsUuid + item.propSubType + item.propType + item.party;
      this.goodsList.map((val, idx) => {
        this.goodsList[idx].show = id == (val.goodsUuid + val.propSubType + val.propType + val.party);
      });
      this.$forceUpdate()
    },
    // 上传/删除图片事件
    changeUpload(list, key){
      if(list.length > 0){
        this.fileList = [...list,];
      }else{
        this.fileList = [];
      }
    },
    blurChange (e) {
      if (e.outQty > e.qty || e.outQty < 0) {
        e.outQty = e.qty;
      }
    },
    submit () {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if(this.goodsList.length == 0) return this.$u.toast('请选择物品！')
          this.goodsList.forEach(item => {
            delete item.show;
            delete item.swiperDisabled;
            delete item.swiperOptions;
          })
          let param = {
            caseCode: this.detailItem.caseCode,
            caseType: "trans_case",
            custodyDtlList: this.goodsList,
            custodyId: this.detailInfo.custodyId,
            custodyNo: this.detailInfo.custodyNo,
            custodyType: this.detailInfo.custodyType,
            docId: this.detailItem.docId,
            docNo: this.detailItem.docNo,
            photo: this.fileUploadParam.bizId,
            remake: this.detailItem.remake,
            storeId: this.detailInfo.storeId,
            storeName:this.detailInfo.storeName,
          }
          if (this.fileList.length > 0) {
            let photoId = []
            this.fileList.forEach(item => {
              photoId.push(item.gfiId)
            })
            param.photo = photoId.join()
          }
          this.$modal.showLoading('正在提交中...');
          storeService.drawOut(param).then(res => {
            if (res.success) {
              this.$modal.hideLoading();
              this.backPrev({
                paramKey:'refresh',
                param:true,
              })
            } else {
              this.$modal.hideLoading();
              this.$u.toast(res.msg);
            }
          }).catch(err => {
            this.$modal.hideLoading();
            console.log(err)
          });
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.page{
  padding: 28rpx 30rpx;
}
.upload-sty{
  margin-left: -12rpx;
}
.pd-lf{
  padding-left: 0;
}
.pd-tp{
  padding-top: 13px;
}
.content{
  // padding: 24rpx 36rpx 180rpx 36rpx;
  padding-bottom: 180rpx;
}
.content-btn{
  padding: 24rpx 36rpx 20rpx 36rpx;
}
.fs-30{
  font-size:30rpx
}
.It-title{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #DADADD;
  padding-bottom: 11px;
  align-items: center;
}
.CT-title{
  font-size: 18px;
  font-weight: bold;
}
.CT-label{
  font-size: 13px;
  color: #989EA1;
  padding-bottom: 6px;
}
.CT-value{
  font-size: 14px;
  color: #393B3D;
}
.form-style-title{
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  align-items: flex-start;
}
.form-style{
  padding: 0rpx 8rpx
}
.left-info-tag{
  padding: 8px 2px;
  background-color: #ee8c4f ;
  border-radius: 22px;
  margin: 3px 6px 13px 0px;
}
.left-info-check-tag{
  padding: 8px 2px;
  background-color: #ee8c4f;
  border-radius: 22px;
  margin: 3px 6px 13px 0px;
}
.fs-title{
  font-weight: bold;
  font-size: 32rpx;
}
.loc-box {
  line-height: 38px;
  padding: 11px 0;
  font-size: 13px;
  color: #303133;
}
.inline-box {
  display: flex;
  align-items: center;
}
.loc-inline{
  font-size: 13px;
  color: #666666;
}
.part-item-info {
  text-align: left;
  .sub-title {
    color: $u-tips-color;
    padding-bottom: 10rpx;
    font-size: 26rpx;
  }
  .main-info {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .main-info-color {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
    color: red;
  }
}
.total-sty{
  padding-top: 20rpx;
}
.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			uni-button {
				flex: 0.28;
			}
		}
	}
</style>
